<template>
  <div ref="lineRef" style="width: 90%"></div>
</template>
<script setup lang="tsx">
import * as echarts from 'echarts';
import { ref, onMounted, watch } from 'vue';
const props = defineProps({
  xAxis: {
    type: Array,
  },
  data: {
    type: Array,
  },
  unit: {
    type: String,
    default: '个',
  },
});
const lineRef = ref<HTMLElement>();
let chart: echarts.EChartsType | null = null;
const initChart = () => {
  chart && chart.setOption(option);
};
watch(props, () => {
  initChart();
});
onMounted(() => {
  chart = echarts.init(lineRef.value!);
  initChart();
});
const option = {
  grid: {
    top: 30,
    // right: 10,
    // left: 50,
    bottom: 50,
  },
  tooltip: {
    trigger: 'axis',
  },
  xAxis: [
    {
      type: 'category',
      data: props.xAxis,
      axisLine: {
        lineStyle: {
          color: '#ddd',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: '#000',
      },
      boundaryGap: false,
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#ddd',
        },
      },
      axisLabel: {
        color: '#000',
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: '支数',
      type: 'line',
      data: props.data,
      symbolSize: 6,
      symbol: 'circle',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#2f8cf0b3',
          },
          {
            offset: 1,
            color: '#9E87FF03',
          },
        ]),
      },
      emphasis: {
        itemStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {
                offset: 0,
                color: '#2f8cf0',
              },
              {
                offset: 0.4,
                color: '#2f8cf0',
              },
              {
                offset: 0.5,
                color: '#2f8cf0',
              },
              {
                offset: 0.7,
                color: '#2f8cf0',
              },
              {
                offset: 0.8,
                color: '#2f8cf0',
              },
              {
                offset: 1,
                color: '#fff',
              },
            ],
          },
          borderColor: '#2f8cf0',
          borderWidth: 2,
        },
      },
    },
  ],
};
</script>
<style lang="less" scoped></style>
